<template>
    <a-button class="editable-add-btn" style="margin-bottom: 3px" @click="handleAdd">添加</a-button>
    <a-table bordered :data-source="formData.labExamQuestionAnswerList" :pagination="false" :columns="columns">
        <template #bodyCell="{ column, record, index }">
            <a-input name="id" v-model:value="record.id" style="display: none" />
            <a-input name="question_id" v-model:value="record.question_id" style="display: none" />
            <template v-if="column.dataIndex === 'isRight'" style="text-align:center">
                <a-checkbox name="isRight" :key="index" v-model:checked="record.isRight"
                    @change="changeda($event, index)"></a-checkbox>
                <!-- {{ record.isRight }} -->
            </template>
            <template v-if="column.dataIndex === 'content'" style="text-align:center">
                <a-input name="content" v-model:value="record.content" type="textarea" style="height: 50px;width: 560px;" />
            </template>
            <template v-if="column.dataIndex === 'operation'" style="text-align:center">
                <a-button type="danger" shape="circle" preIcon="ant-design:delete-outlined"
                    @click="onDelete(record.key)"></a-button>
            </template>
        </template>
    </a-table>
</template>
<script lang="ts" setup>
import { computed, reactive } from 'vue';



interface NewData {
    key: string;
    isRight: boolean;
    content: string;
}

const formData = reactive<Record<string, any>>({
    labExamQuestionAnswerList: [],
});

const columns = [
    {
        title: '是否答案',
        dataIndex: 'isRight',
        align: "center",
        width: '20%',
    },
    {
        title: '答案内容',
        dataIndex: 'content',
        align: "center",
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: "center",
        width: '10%',
    },
];

const count = computed(() => formData.labExamQuestionAnswerList.length + 1);

const onDelete = (key: string) => {
    formData.labExamQuestionAnswerList.splice((parseInt(key) - 1), 1);
};

const handleAdd = () => {
    const newData = {
        key: `${count.value}`,
        isRight: false,
        content: '',
    };
    formData.labExamQuestionAnswerList.push(newData);
};



const handleAddS = (QuList) => {
    formData.labExamQuestionAnswerList = [];
    for (var i = 0; i < parseInt(QuList.length); i++) {
        let newData = reactive<NewData>({
            key: "",
            isRight: false,
            content: "",
        })
        newData.key = i.toString()
        newData.isRight = QuList[i].isRight == "true" ? true : false
        newData.content = QuList[i].content
        formData.labExamQuestionAnswerList.push(newData);
    };
    // console.log(newData);
};

function changeda(e, index) {
    // console.log(index);
    formData.labExamQuestionAnswerList[index].isRight = e.target.checked
    // console.log(e.target.checked);
    // e.target.value = e.target.checked;
    // console.log(e);
}


defineExpose({
    handleAddS,
    onDelete,
    formData,
});

</script>

<style lang="less" scoped>
.editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
        padding-right: 24px;
    }

    .editable-cell-text-wrapper {
        padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        margin-top: 4px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 20px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }
}

.editable-cell:hover .editable-cell-icon {
    display: inline-block;
}
</style>
